<!DOCTYPE html>
<html class="x-admin-sm">

{include file="public1/_header" /}
<script type="text/javascript" src="__STATIC__/admin/js/vue.min.js"></script>
<style>
	.student-name {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-weight: 300;
		font-size: 18px;
	}
	.subject-icon img {
		height: 100%;
	}
	.subject-icon {
		width: 40px;
		height: 40px;
		margin: 10px auto;
		background: #e5f6ff;
		border-radius: 50%;
		overflow: hidden;
	}
	.student-wrap {
		height: 100%;
		overflow: hidden;

	}
	.main-content-box {
		position: relative;
		background: #fff;
		float: left;
		width: 90px;
		height: 90px;
		margin: 8px;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
		box-shadow: 0 0px 1px rgba(0,0,0,.8);
	}
	.input-margin{
		display: block;
		padding: 4px 0;
		position: relative;
	}
	table tr td span button{
		display: none!important;
	}
	table tr td span:hover button{
		display: block!important;
	}
	.close{
		position: absolute;
		top: 10px;
		right: 0px;
	}
</style>
<body class="index">
<div class="layui-fluid">
	<div class="layui-card">
		<table class="layui-table">
			<colgroup>
				<col width="14%">
				<col width="14%">
				<col width="14%">
				<col width="14%">
				<col width="14%">
				<col width="14%">
				<col width="14%">
			</colgroup>
			<thead>
			<tr>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
				<th>星期六</th>
				<th>星期日</th>
			</tr>
			</thead>
			<tbody>
			<tr>

				{if(isset($result['monday'])) }
				<td valign="top">
					{foreach $result['monday'] as $k=>$v }
					<span class="input-margin">
                                    <input type="text" data-id="{$v.id}" value="{$v.student_name}" readonly name="title" placeholder="点击添加" autocomplete="off" class="layui-input">
                                    <button  data-id="{$v.id}" class="layui-btn layui-btn-xs close"><i class="icon iconfont"></i></button>
                                </span>
					{/foreach}
					<button type="button" data-id="1" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>

				</td>
				{else /}
				<td valign="top">
					<button type="button" data-id="1" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>
				</td>
				{/if}
				{if(isset($result['tuesday'])) }
				<td valign="top">
					{foreach $result['tuesday'] as $k=>$v }
					<span class="input-margin">
                                    <input type="text" data-id="{$v.id}" value="{$v.student_name}" readonly name="title" placeholder="点击添加" autocomplete="off" class="layui-input">
                                    <button  data-id="{$v.id}" class="layui-btn layui-btn-xs close"><i class="icon iconfont"></i></button>
                                </span>
					{/foreach}
					<button type="button" data-id="2" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>

				</td>
				{else /}
				<td valign="top">
					<button type="button" data-id="2" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>
				</td>
				{/if}
				{if(isset($result['wednesday'])) }
				<td valign="top">
					{foreach $result['wednesday'] as $k=>$v }
					<span class="input-margin">
                                    <input type="text" data-id="{$v.id}" value="{$v.student_name}" readonly name="title" placeholder="点击添加" autocomplete="off" class="layui-input">
                                    <button  data-id="{$v.id}" class="layui-btn layui-btn-xs close"><i class="icon iconfont"></i></button>
                                </span>
					{/foreach}
					<button type="button" data-id="3" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>

				</td>
				{else /}
				<td valign="top">
					<button type="button" data-id="3" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>
				</td>
				{/if}
				{if(isset($result['thursday'])) }
				<td valign="top">
					{foreach $result['thursday'] as $k=>$v }
					<span class="input-margin">
                                    <input type="text" data-id="{$v.id}" value="{$v.student_name}" readonly name="title" placeholder="点击添加" autocomplete="off" class="layui-input">
                                    <button  data-id="{$v.id}" class="layui-btn layui-btn-xs close"><i class="icon iconfont"></i></button>
                                </span>
					{/foreach}
					<button type="button" data-id="4" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>

				</td>
				{else /}
				<td valign="top">
					<button type="button" data-id="4" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>
				</td>
				{/if}
				{if(isset($result['friday'])) }
				<td valign="top">
					{foreach $result['friday'] as $k=>$v }
					<span class="input-margin">
                                    <input type="text" data-id="{$v.id}" value="{$v.student_name}" readonly name="title" placeholder="点击添加" autocomplete="off" class="layui-input">
                                    <button data-id="{$v.id}" class="layui-btn layui-btn-xs close"><i class="icon iconfont"></i></button>
                                </span>
					{/foreach}
					<button type="button" data-id="5" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>

				</td>
				{else /}
				<td valign="top">
					<button type="button" data-id="5" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>
				</td>
				{/if}
				{if(isset($result['saturday'])) }
				<td valign="top">
					{foreach $result['saturday'] as $k=>$v }
					<span class="input-margin">
                                    <input type="text" data-id="{$v.id}" value="{$v.student_name}" readonly name="title" placeholder="点击添加" autocomplete="off" class="layui-input">
                                    <button  data-id="{$v.id}" class="layui-btn layui-btn-xs close"><i class="icon iconfont"></i></button>
                                </span>
					{/foreach}
					<button type="button" data-id="6" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>

				</td>
				{else /}
				<td valign="top">
					<button type="button" data-id="6" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>
				</td>
				{/if}
				{if(isset($result['sunday'])) }
				<td valign="top">
					{foreach $result['sunday'] as $k=>$v }
					<span class="input-margin">
                                    <input type="text" data-id="{$v.id}" value="{$v.student_name}" readonly name="title" placeholder="点击添加" autocomplete="off" class="layui-input">
                                    <button  data-id="{$v.id}" class="layui-btn layui-btn-xs close"><i class="icon iconfont"></i></button>
                                </span>
					{/foreach}
					<button type="button" data-id="0" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>

				</td>
				{else /}
				<td valign="top">
					<button type="button" data-id="0" class="layui-btn layui-btn-fluid layui-btn-primary">新增</button>
				</td>
				{/if}
			</tr>
			</tbody>
		</table>
	</div>
</div>
<div id="students" style="display: none;">
	<div class="student-wrap">
		<div class="main-content-box" v-for="(item,index) in studentList" :key="index" @click="pickStudent(item)">
			<div class="subject-icon">
				<img :src="item.avatar" alt="">
			</div>
			<div class="student-name">{{item.name}}</div>
		</div>
	</div>
</div>
<script>
	var getUrlParam = function(name) {
		var url = location.search;
		url = url.substring(url.indexOf("?"));
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			for (var i = 0; i < strs.length; i++) {
				if (name == strs[i].split("=")[0]) {
					return unescape(strs[i].split("=")[1]);
				}
			}
		}
		return "";
	}
	$(function(){
		var url = "__STATIC__/admin/";

		var basicData = getUrlParam("basicData");
		var attr_id = null;
		$('body').on("click", "input", function() {
			var pre = $(this);
			attr_id = pre.data('id');
			console.log(attr_id)
			// stuIndex = layer.open({
			//     title: "添加",
			//     type: 1,
			//     area: ['680px', '450px'],
			//     content: $("#students")
			// });
			//
		});
		$('body').on("click", ".close", function() {
			var pre = $(this);
			layer.confirm('确定要删除么？', {
				btn: ['确定', '取消']
			}, function() {
				var id = pre.data('id');
				var data = {
					id:id,
					class_id:basicData
				}
				$.post("{:url('delete')}",data,function(res){
					if(res.status == 0){
						$(pre).parent().remove();
						layer.closeAll('dialog');
					}else{
						location.reload();
					}
				})

			})

			//
		});

		var app = new Vue({
			el:"#students",
			data:{
				studentList:null
			},
			created() {
				this.getData();
			},
			methods:{
				pickStudent(item){
					var param = {
						class_id:basicData,
						student_id:item.id,
						attr_id:attr_id
					}
					$.post("addDuty",param,function(res){
						if(res.status == 0){
							location.reload();
							layer.close(stuIndex);
						}
					})

				},
				getData() {
					var _this = this;
					var data = {
						class_id:basicData,
					}
					$.post("getClassStudent",data,function(res){
						_this.studentList = res.data
					})
				}
			}
		});
		console.log(app.$data)
		$('body').on("click", ".layui-btn-primary", function() {
			if(app.$data.studentList.length == 0){
				layer.msg('班级没有学生，请先添加学生', {icon: 6});
				return false
			}
			var pre = $(this);
			attr_id = pre.data('id');
			stuIndex = layer.open({
				title: "添加",
				type: 1,
				shade:0,
				area: ['680px', '450px'],
				content: $("#students")
			});
		});
	})
</script>
</body>
</html>
